<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<!-- 使用IE最高版本内核渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
        为了解决ie9以下浏览器对H5新增元素不识别，并导致CSS不起作用的问题
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        为了解决ie9以下浏览器对CSS3Media Query媒体查询不识别的问题
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="icon" href="img/weixin.jpg" />
		<link rel="stylesheet" href="css/reset.css" />
		<title>bootstrap简历</title>

	</head>
	<body>
		<div class="container">
			<div class="row">
				<header>
					<div class="col-md-3 cardbox">
						<div class="card-header">
							<div class="myphoto">
								<img src="img/myphoto.jpg" alt="" class="img-circle">
							</div>
							<h1>莫云波</h1>
							<p class="text-muted">广州 | web前端工程师</p>
						</div>
						<div class="card-list">
							<ul>
								<li>
									<a class="glyphicon glyphicon-tags" href="https://github.com/"
										title="https://github.com/" target="_blank"></a>
								</li>
								<li>
									<a class="glyphicon glyphicon-paperclip"
										href="https://blog.csdn.net/qq_22079371?spm=1010.2135.3001.5421"
										title="https://www.csdn.net/" target="_blank"></a>
								</li>
								<li>
									<a class="glyphicon glyphicon-phone" href="tel://18407722835"
										title="18407722835"></a>
								</li>
								<li>
									<a class="glyphicon glyphicon-envelope" href="https://github.com/"
										title="972517681@qq.com" target="_blank"></a>
								</li>
							</ul>
						</div>
						<div class="card-footer hidden-xs hidden-sm">
							<a class="card-btn" href="javascript:void(0)" onclick="window.print()">Download
								Resume</a>
						</div>
					</div>
				</header>

				<aside>
					<div class="col-md-8 com">
						<div class="com-item" id="1">
							<h3 class="text-muted">基本信息</h3>
							<dl>
								<dt>性别</dt>
								<dd>男</dd>
							</dl>
							<dl>
								<dt>出生日期</dt>
								<dd>15 Sept 1995</dd>
							</dl>
							<dl>
								<dt>手机</dt>
								<dd>18407722835</dd>
							</dl>
							<dl>
								<dt>E-MAIL</dt>
								<dd>972517681@qq.com</dd>
							</dl>
						</div>

						<div class="com-item" id="2">
							<h3 class="text-muted">职业技能</h3>
							<div class="row  skill">
								<div class="col-md-6 col-xs-6">
									<ul>
										<li>
											<span>HTML</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"
													style="width: 95%;">
													<!-- 95% -->
												</div>
											</div>
										</li>
										<li>
											<span>CSS</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"
													style="width: 90%;">
													<!-- 90% -->
												</div>
											</div>
										</li>
										<li>
											<span>Bootstrap</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"
													style="width: 78%;">
													<!-- 78% -->
												</div>
											</div>
										</li>
										<li>
											<span>Javascript</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"
													style="width: 53%;">
													<!-- 53% -->
												</div>
											</div>
										</li>
									</ul>
								</div>

								<div class="col-md-6 col-xs-6">
									<ul>
										<li>
											<span>小程序</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"
													style="width: 95%;">
													<!-- 95% -->
												</div>
											</div>
										</li>
										<li>
											<span>Vue</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"
													style="width: 35%;">
													<!-- 35% -->
												</div>
											</div>
										</li>
										<li>
											<span>element-ui</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"
													style="width: 30%;">
													<!-- 30% -->
												</div>
											</div>
										</li>
										<li>
											<span>Java</span>
											<div class="progress">
												<div class="progress-bar progress-bar-info" role="progressbar"
													aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
													style="width: 20%;">
													<!-- 20% -->
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>

						<div class="com-item" id="4">
							<h3 class="text-muted">工作经历</h3>
							<div class="row  edu">
								<div class="col-md-3 col-xs-3">
									<div class="eduphoto">
										<img src="img/luchuang.png" alt="">
									</div>
								</div>
								<div class="col-md-8 col-xs-8 corporation">
									<h3>广西路慧科技有限公司</h3>
									<p>2017/07 - 2022/07 | 技术部 | 前端开发工程师</p>
									<p>主要负责产品功能的前端研发以及当任讲师给客户讲解产品；</p>
									<p>1、PC 端根据设计图完成静态页面编写；</p>
									<p>2、小程序端根据设计完成接口及页面编写；</p>
									<p>3、参与部分需求调研；</p>
									<p>4、完成前后端联调；</p>
									<p>5、修复测试过程中发现的 bug；</p>
									<p>6、 协助后台开发人员完善产品功能及测试文档；</p>
									<p>7、完成前端代码以及小程序的发布；</p>
									<p>8、配合项目经理完成投标技术文件编写；</p>
									<p>9、给客户培训讲解产品以及产品部署；</p>
								</div>
							</div>
						</div>

						<div class="com-item" id="5">
							<h3 class="text-muted">项目作品</h3>
							<div class="works clearfix">
								<ul>
									<li>
										<a href="#">
											<img src="./img/xiaochengxu.jpeg" alt="">
											<div class="works-bg">
												<div class="works-pic">
													<img src="./img/jingyiqun.png" alt="" class="img-circle">
												</div>
												<h3>精益群小程序</h3>
												<div class="text-center">扫码即可体验</div>
											</div>
										</a>
									</li>
									<li>
										<a href="https://www.luchuang.com/le/leangroup.html" target="_blank">
											<img src="./img/ProductSolutions13.jpg" alt="">
											<div class="works-bg">
												<h3>路创精益群</h3>
												<div class="works-details">
													基于服务企业精益管理的小程序。主要包含了现场管理、问题管理、物品管理、课堂管理、活动管理等五大模块。</div>
												<div class="btn">详情</div>
											</div>
										</a>
									</li>
									<li>
										<a href="https://www.luchuang.com/le/cloud.html" target="_blank">
											<img src="./img/ProductSolutions8.png" alt="">
											<div class="works-bg">
												<h3>路创工厂云</h3>
												<div class="works-details">基于工厂和职业教育的实训管理系统。主要包含了生产管理、质量管理、物流管理等三大模块。
												</div>
												<div class="btn">详情</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>

						<div class="com-item" id="3">
							<h3 class="text-muted">教育经历</h3>
							<div class="row  edu">
								<div class="col-md-3 col-xs-3">
									<div class="eduphoto">
										<img src="img/LOGO.png" alt="">
									</div>
								</div>
								<div class="col-md-8 col-xs-8 corporation">
									<h3>柳州职业技术学院</h3>
									<p>2014 - 2017 | 软件技术</p>
									<p>学习计算机专业基础知识。</p>
									<p>作为志愿者宣传科科长，多次组织志愿者活动。</p>
								</div>
							</div>
						</div>
						
						<footer>
							<p>Design by 2022/02/02 星期八 天气晴朗 柒陌个人简历模板</p>
						</footer>
					</div>
				</aside>

				<div class="col-md-1 fr hidden-xs">
					<div class="nav">
						<ul>
							<li>
								<a href="#1" class="glyphicon glyphicon-home">
									<span class="bubble">
										基本信息
									</span>
								</a>
							</li>
							<li>
								<a href="#2" class="glyphicon glyphicon-folder-open">
									<span class="bubble">
										职业技能
									</span>
								</a>
							</li>
							
							<li>
								<a href="#4" class="glyphicon glyphicon-briefcase">
									<span class="bubble">
										工作经历
									</span>
								</a>
							</li>
							<li>
								<a href="#5" class="glyphicon glyphicon-leaf">
									<span class="bubble">
										项目作品
									</span>
								</a>
							</li>
							<li>
								<a href="#3" class="glyphicon glyphicon-education">
									<span class="bubble">
										教育经历
									</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script>
			// 获取浏览器高度
			$(function() {
				$(document).ready(function() {
					var winHeight = $(window).height(); //winHeight即浏览器高度
					$(".com").css({
						"height": winHeight
					});
				})
			})
		</script>
	</body>
</html>
